<template>
    <div>
        <input
            type="text"
            @keyup.enter="add"
            v-model="todo"
            placeholder="输入完毕按回车"
        />
        <ul>
            <transition-group name="item" appear>
                <Todo v-for="todo in lists" :key="todo" :todo="todo" />
            </transition-group>
        </ul>
    </div>
</template>

<script>
import Todo from "./Todo.vue";

export default {
    name: "TodoList",
    data() {
        return {
            todo: "",
            lists: ["吃饭", "睡觉"],
        };
    },
    components: {
        Todo,
    },
    methods: {
        add() {
            this.lists.unshift(this.todo);
        },
    },
    mounted() {
        this.$bus.$on("delTodo", (todo) => {
            console.log(todo);
            this.lists.splice(this.lists.indexOf(todo), 1);
        });
    },
};
</script>

<style>
.item-enter-active {
    animation: item 1s linear;
}

.item-leave-active {
    animation: item 1s linear reverse;
}

@keyframes item {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}
</style>
